<!-- 首页--教练 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useLongLatStore
	} from '@/stores/index'
	import {
		qrySpListApi
	} from '@/api/coach.js'
	import {
		getDictTypetApi,
		getCityListtApi
	} from '@/api/public.js'
	// 经纬度
	const longLatStore = useLongLatStore()
	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		menuButtonHeight: 0,
		menuButtonMargin: 0,
		distanceType: '',
		regionType: '',
		regionList: [],
		distance: '',
		sortType: '1',
		pageNo: 1, // 当前页码
		pageSize: 10, // 每页数量
		totalPages: 10, // 总页数
		status: 'loadmore',
		list: [],
		typeCode: '',
	})


	onLoad(() => {
		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.menuButtonHeight = menuButtonInfo.height
		data.menuButtonMargin = menuButtonInfo.top - statusBarHeight
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
		data.currentCity = uni.getStorageSync('currentCity') || {}
		init()
	})
	// 初始化
	const init = () => {
		getDictTypList()
		getRegionList()

	}
	// 获取数据字典枚举值
	const getDictTypList = () => {
		Promise.all([getDictTypetApi('shop_type'), getDictTypetApi('shop_tag')])
			.then(types => {
				const [shopType] = types;
				data.typeList = shopType.data
				// shopTagList = shopTag.data
				getList()
			})
	}

	// 获取教练类型
	const dictTypetList = ref([{
		type: '',
		dictLabel: '教练推荐'
	}])
	getDictTypetApi('t_sp_service_type').then(res => {
		dictTypetList.value = res.data
		console.log('res: ', res);
	})


	// 获取城市对应区域列表
	const getRegionList = () => {
		console.log(data, 'data');
		getCityListtApi({
			qryType: 2,
			parentId: data.currentCity.code === undefined ? '' : data.currentCity.code
		}).then(res => {
			res.data.city.forEach(region => {
				region.list.forEach(item => {
					data.regionList.push(item)
				})
			})
		})
	}

	// 距离类型
	const distanceTypeList = [{
			label: '城区',
			value: 0
		},
		{
			label: '距离',
			value: 1
		}
	]
	// 切换区域
	const regionChange = (item) => {
		data.regionType = item.code
		data.distance = ''
		resetList()
	}

	const distanceChange = (item) => {
		data.distance = item.value
		data.regionType = ''
		resetList()
	}

	// 距离列表
	const distanceList = [{
			label: '附近',
			value: 1
		},
		{
			label: '≤1km',
			value: 2
		},
		{
			label: '≤3km',
			value: 3
		},
		{
			label: '≤10km',
			value: 4
		}
	]
	// 监听页面滚动到底部
	onReachBottom(() => {
		if (data.status !== 'loadmore') return
		getList()
	})

	// 获取场馆列表
	const getList = () => {

		data.status = 'loading';
		// 获取教练列表
		qrySpListApi({
			pageSize: data.pageSize,
			pageNum: data.pageNo,
			latitude: longLatStore.info.latitude,
			longitude: longLatStore.info.longitude,
			cityCode: data.currentCity.code,
			qryType: 2,
			bizType: data.typeCode
		}).then(res => {
			res.data.map((item) => {
				item.tagLabel = item.tagLabel.split("|")
			})
			const list = res.data
			const total = res.total
			console.log('res.total: ', res.total);
			// const { list, total } = res.data
			data.totalPages = Math.ceil(total / data.pageSize)
			data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
			data.pageNo++;
			data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'
		})
	}

	// 查看教练详情
	const goCoachDetai = (spId) => {
		uni.navigateTo({
			url: `/subPackage/coach/detail?spId=${spId}`
		})
	}
	let dropdownIsOpen = ref(false)
	const dropdownChange = bool => {
		dropdownIsOpen.value = bool
	}

	// 下拉菜单
	const uDropdownRef = ref(null)

	// 场馆类型切换
	const typeChange = (item) => {
		console.log(item, 'item');
		data.typeCode = item.dictValue
		resetList()
	}

	// 重置列表
	const resetList = () => {
		uDropdownRef.value.close()
		data.pageNo = 1
		data.list = []
		getList()
	}


	// 教练搜索
	const searchClick = () => {
		uni.navigateTo({
			url: `/subPackage/home/search?type=${3}`
		})
	}
</script>

<template>
	<view class="coach-page">
		<!-- head -->
		<view class="head" :style="{ 'padding-top': data.barHeight + 'px' }">
			<view class="search-box"
				:style="{ 'height': data.menuButtonHeight + 'px', 'margin-top': data.menuButtonMargin + 'px', 'margin-bottom': data.menuButtonMargin + 'px' }"
				@click="searchClick">
				<u-icon name="search" />
				<text class="default-value">FEELINGME·乐刻私教工232312</text>
			</view>
			<view class="screen-box">
				<scroll-view class="type_box" scroll-x enable-flex>
					<view class="item_box" :class="'' == data.typeCode ? 'active_box' : ''"
						@click="typeChange({ dictValue: '' })">教练推荐
					</view>
					<view class="item_box" v-for="item in dictTypetList" :key="item.dictValue"
						:class="item.dictValue == data.typeCode ? 'active_box' : ''" @click="typeChange(item)">
						<text>
							{{ item.dictLabel }}教练
						</text>
					</view>
				</scroll-view>
				<view class="drop-down-box" :class="!dropdownIsOpen ? 'hide' : ''">
					<up-dropdown ref="uDropdownRef" title-size="24rpx" height="88rpx" active-color="#008043"
						inactive-color="#303133" menu-icon="arrow-down-fill" border-radius="24rpx"
						@open="dropdownChange(true)" @close="dropdownChange(false)">
						<up-dropdown-item title="附近">
							<view class="nearby-box">
								<view class="types-box">
									<view v-for="item in distanceTypeList" :key="item.value" class="item"
										:class="item.value == data.distanceType ? 'active' : ''"
										@click="data.distanceType = item.value">{{
                      item.label }}</view>
								</view>
								<view class="types-content">
									<view v-if="data.distanceType == 0" class="region-box">
										<view v-for="item in data.regionList" class="item" :key="item.code"
											:class="item.code == data.regionType ? 'active' : ''"
											@click="regionChange(item)">{{ item.name
                      }}</view>
									</view>
									<view v-else class="distance-box">
										<view v-for="item in distanceList" :key="item.value" class="item"
											:class="data.distance == item.value ? '  active' : ''"
											@click="distanceChange(item)">
											<text class="label">{{ item.label }}</text>
											<up-icon v-if="data.distance == item.value" name="checkbox-mark"></up-icon>
										</view>
									</view>
								</view>
							</view>
						</up-dropdown-item>
						<up-dropdown-item title="擅长方向">
							<view class="sort-box">
								<view class="types-box">
									<view class="item active">擅长方向</view>
								</view>
								<view class="types-content">
									<view v-for="item in 18" class="item" :key="item"
										:class="item == 5 ? 'active' : ''">{{ `场地${item}`
                    }}</view>
								</view>
								<view class="btns-box">
									<view class="btn reset">重置</view>
									<view class="btn sure">确认</view>
								</view>
							</view>
						</up-dropdown-item>
						<up-dropdown-item title="筛选">
							<view class="screen-box">
								<view class="types-box">
									<view class="item">教练性别</view>
									<view class="item active">教练评级</view>
								</view>
								<view class="types-content">
									<view v-if="false" class="sex-box">
										<view class="item active">男</view>
										<view class="item">女</view>
									</view>
									<view v-else class="certificate-box">

										<view class="item active">金牌教练</view>
										<view class="item">银牌教练</view>
									</view>
								</view>
								<view class="btns-box">
									<view class="btn reset">重置</view>
									<view class="btn sure">确认</view>
								</view>
							</view>
						</up-dropdown-item>
					</up-dropdown>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<!-- 空状态 -->
			<view v-if="false" style="padding-top: 294rpx;">
				<u-empty mode="address" width="150" height="150" textColor="#838385"
					icon="https://image.nanjingtouyang.com/touy/2023/10/2023103113051755879.png"
					text="暂时没有您想要的结果~"></u-empty>
			</view>
			<!-- 教练列表 -->
			<view v-else class="coach-list">
				<view v-for="item in data.list" :key="item.spId"
					style="padding: 24rpx;	background-color: #fff;margin: 20rpx 0 ;" @click="goCoachDetai(item.spId)">
					<view class="item">
						<!-- <view class="left"> -->
						<image :src="item.spAvatar" style="width: 168rpx;height: 224rpx;" mode="aspectFill" />
						<view class="right">
							<view style="    margin-left: 30rpx;">
								<text>{{item.spName}}</text>
								<text class="goldMedalCoach">{{ item.spLevel==='1' ? '金牌教练':'银牌教练'}}</text>
							</view>

							<view style="    margin: 18rpx 0 4rpx 18rpx;">

								<view style=" width: 444rpx; display: flex;">
									<view class="guidance" v-for="(it,ind) in item.tagLabel" :key="ind">{{it}}
									</view>

								</view>
								<view class="score">
									<view class="score_view" style="color: #FF9D68;">{{item.score}}</view>
									<view class="score_view"
										style="border-left: 1rpx solid #ccc;border-right: 1rpx solid #ccc">
										{{item.serviceTime}}
									</view>
									<view class="score_view" style="">{{item.workYears}}</view>
								</view>
								<view style="    text-align: center; display: flex;">
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">客户评分</view>
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">服务时长</view>
									<view class="score_view" style="width: 33.3%;font-size: 20rpx;">从业年限</view>
								</view>
							</view>

							<view class="certDesc">
								<view class="certDesc_view" v-for="(its,idx) in item.certList" :key="its.id">
									{{its.certDesc}}
								</view>
							</view>
						</view>

					</view>
					<view class="spDesc">
						<text style="font-size: 24rpx;">{{item.spDesc}}</text>
						<text style="white-space: nowrap;"><text
								style="color: #3F9742;font-size: 36rpx;    ">{{item.price}}</text>/次</text>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.coach-page {
		min-height: 100vh;
		background: #F6F6F6;


		.score {
			margin: 10rpx 0;
			text-align: center;
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			width: 444rpx;

			.score_view {
				width: 33.3%;

			}
		}

		.certDesc {
			display: flex;
			justify-content: space-between;
			width: 444rpx;
			margin-left: 30rpx;

			.certDesc_view {
				width: 140rpx;
				border: 1rpx solid #ccc;
				padding: 5rpx 8rpx;
				border-radius: 10rpx;
				font-size: 20rpx;
			}
		}

		.spDesc {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}


		.type_box {
			margin-top: 28rpx;
			margin-left: 32rpx;
			white-space: nowrap;

			& .item_box {
				display: inline-block;
				padding: 8rpx 24rpx;
				margin-right: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #303133;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				&.active_box {
					background: #E7FFE8;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #008043;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}


		// 顶部
		&>.head {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100vw;
			background: #FFFFFF;
			// overflow: hidden;

			// 搜索框
			& .search-box {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 0rpx 30rpx;
				margin: 12rpx 0;
				margin-left: 32rpx;
				width: 492rpx;
				color: #838385;
				background: #F6F6F6;
				border-radius: 200rpx 200rpx 200rpx 200rpx;



				& .u-icon {
					font-size: 32rpx;
				}

				& text {
					margin-left: 16rpx;
					width: 288rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}


			.active_box {
				font-weight: 500;
				font-size: 28rpx;
				color: #008043;
				background: #FFFFFF;
			}

			// 下拉模块
			& .drop-down-box {
				&.hide {
					&::v-deep .u-dropdown {
						& .u-dropdown__content {
							width: 0;
							height: 0;
						}

						& .u-dropdown__content__mask {
							width: 0;
							height: 0;
						}
					}
				}

				// 附近
				& .nearby-box {
					padding-top: 4rpx;
					display: flex;
					min-height: 398rpx;
					background-color: #F6F6F6;

					// 类型区域
					& .types-box {
						width: 188rpx;

						& .item {
							height: 116rpx;
							line-height: 116rpx;
							text-align: center;
							font-weight: 400;
							font-size: 28rpx;
							color: #303133;

							&.active {
								font-weight: 500;
								font-size: 28rpx;
								color: #008043;
								background: #FFFFFF;
							}
						}
					}

					// 类型枚举
					& .types-content {
						padding-top: 20rpx;
						height: inherit;
						width: 562rpx;
						background: #FFFFFF;

						// 区域选择
						.region-box {
							display: flex;
							flex-wrap: wrap;

							& .item {
								display: inline-block;
								margin: 10rpx;
								width: 160rpx;
								height: 64rpx;
								line-height: 64rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #303133;
								text-align: center;

								&.active {
									font-weight: 500;
									font-size: 28rpx;
									color: #008043;
									background: #E7FFE8;
									border-radius: 200rpx;
								}
							}
						}

						// 距离选择
						.distance-box {

							& .item {
								display: flex;
								align-items: center;
								padding-left: 30rpx;
								margin-bottom: 32rpx;

								& .label {
									width: 122rpx;
									height: 64rpx;
									line-height: 64rpx;
									text-align: center;
									font-weight: 400;
									font-size: 28rpx;
									color: #303133;
								}

								&.active {
									& .label {
										font-weight: 500;
										font-size: 28rpx;
										color: #008043;
										background: #E7FFE8;
										border-radius: 200rpx;
									}

									&::v-deep .u-icon {
										margin-left: 322rpx;
										font-size: 32rpx;

										& text {
											text-transform: none;
											background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
											background-clip: text;
											-webkit-background-clip: text;
											-webkit-text-fill-color: transparent;
										}
									}

								}
							}
						}
					}
				}

				// 擅长方向
				& .sort-box {
					padding-top: 4rpx;
					margin-top: 0;
					display: flex;
					min-height: 746rpx;
					background-color: #F6F6F6;

					// 类型区域
					& .types-box {
						width: 188rpx;

						& .item {
							height: 116rpx;
							line-height: 116rpx;
							text-align: center;
							font-weight: 400;
							font-size: 28rpx;
							color: #303133;

							&.active {
								font-weight: 500;
								font-size: 28rpx;
								color: #008043;
								background: #FFFFFF;
							}
						}
					}

					// 类型枚举
					& .types-content {
						padding-top: 20rpx;
						height: inherit;
						width: 562rpx;
						background: #FFFFFF;
						display: flex;
						flex-wrap: wrap;

						& .item {
							display: inline-block;
							margin: 10rpx;
							width: 160rpx;
							height: 64rpx;
							line-height: 64rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #303133;
							text-align: center;

							&.active {
								font-weight: 500;
								font-size: 28rpx;
								color: #008043;
								background: #E7FFE8;
								border-radius: 200rpx;
							}
						}
					}

					// 按钮
					& .btns-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 0 32rpx;
						width: 750rpx;
						height: 126rpx;
						background: #FFFFFF;

						& .btn {
							&.reset {
								width: 220rpx;
								height: 88rpx;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
								border: 2rpx solid #303133;
								line-height: 88rpx;
								font-weight: 500;
								font-size: 32rpx;
								color: #303133;
								text-align: center;
								background: #FFFFFF;
							}

							&.sure {
								width: 436rpx;
								height: 88rpx;
								line-height: 88rpx;
								background: #303133;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
								font-weight: 500;
								font-size: 32rpx;
								color: #FFFFFF;
								text-align: center;
							}
						}
					}
				}

				// 筛选
				& .screen-box {

					padding-top: 4rpx;
					margin-top: 0;
					display: flex;
					min-height: 668rpx;
					background-color: #F6F6F6;

					// 类型选择
					& .type-box {
						margin-left: 32rpx;
						white-space: nowrap;

						& .item {
							display: inline-block;
							padding: 8rpx 24rpx;
							margin-right: 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #303133;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;

							&.active {
								background: #E7FFE8;
								border-radius: 80rpx 80rpx 80rpx 80rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #008043;
								line-height: 33rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
					}



					// 类型区域
					& .types-box {
						width: 188rpx;

						& .item {
							height: 116rpx;
							line-height: 116rpx;
							text-align: center;
							font-weight: 400;
							font-size: 28rpx;
							color: #303133;

							&.active {
								font-weight: 500;
								font-size: 28rpx;
								color: #008043;
								background: #FFFFFF;
							}
						}
					}

					// 类型枚举
					& .types-content {
						padding-top: 20rpx;
						height: inherit;
						width: 562rpx;
						background: #FFFFFF;

						// 性别
						.sex-box {
							display: flex;
							flex-wrap: wrap;

							& .item {
								display: inline-block;
								margin: 10rpx;
								width: 160rpx;
								height: 64rpx;
								line-height: 64rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #303133;
								text-align: center;

								&.active {
									font-weight: 500;
									font-size: 28rpx;
									color: #008043;
									background: #E7FFE8;
									border-radius: 200rpx;
								}
							}
						}

						// 证书
						.certificate-box {
							display: flex;
							flex-wrap: wrap;

							& .item {
								display: inline-block;
								margin: 10rpx;
								width: 160rpx;
								height: 64rpx;
								line-height: 64rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #303133;
								text-align: center;

								&.active {
									font-weight: 500;
									font-size: 28rpx;
									color: #008043;
									background: #E7FFE8;
									border-radius: 200rpx;
								}
							}
						}
					}

					// 按钮
					& .btns-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 0 32rpx;
						width: 750rpx;
						height: 126rpx;
						background: #FFFFFF;

						& .btn {
							&.reset {
								width: 220rpx;
								height: 88rpx;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
								border: 2rpx solid #303133;
								line-height: 88rpx;
								font-weight: 500;
								font-size: 32rpx;
								color: #303133;
								text-align: center;
								background: #FFFFFF;
							}

							&.sure {
								width: 436rpx;
								height: 88rpx;
								line-height: 88rpx;
								background: #303133;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
								font-weight: 500;
								font-size: 32rpx;
								color: #FFFFFF;
								text-align: center;
							}
						}
					}
				}
			}
		}

		// 内容区域
		&>.content {
			padding-top: 280rpx;

			// 教练列表
			& .coach-list {
				padding: 0 32rpx;
				padding-bottom: 54rpx;


				& .item {
					display: flex;
					// align-items: center;
					// justify-content: space-between;
					margin-top: 24rpx;
					// height: 218rpx;
					background: #FFFFFF;

					& .left {
						width: 168rpx;
						height: 224rpx;
					}

					& .right {

						.goldMedalCoach {
							margin-left: 10rpx;
							font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
							text-align: center;
							font-style: normal;
							text-transform: none;
							padding: 6rpx 10rpx 6rpx 10rpx;
							background: linear-gradient(121deg, #30BD25 0%, #6BE861 100%);
							border-radius: 0rpx 12rpx 12rpx 12rpx;
						}

						.guidance {
							margin-left: 11rpx;
							white-space: nowrap;
							background-color: #ccc;
							padding: 4rpx 12rpx !important;
							border-radius: 20rpx;
							font-size: 20rpx;
							width: 138rpx !important;
							text-align: center;
						}
					}
				}


			}
		}
	}
</style>